<!-- vbs -->
<template>
	<view>
		<!-- 商品列表展示 -->
		<!-- 发请求xmlrequest  拿数据  存本地  做展示 -->
		<!-- v-if 判断result存在 再进行渲染  网络请求 数据延迟 -->
		<uni-list v-if="result">
			<uni-list-item
			:to="`../good-details/good-details?lid=${item.lid}`"
				direction="column"
				v-for="(item, index) in result.data"
				:key="index"
				
			>
				<!-- 自定义插槽 -->
				<!-- tel快捷 -->
				<template slot="body">
					<view class="cell">
						<!-- 图片 -->
						<image
							:src="`http://www.codeboy.com:9999/${item.pic}`"
							mode=""
						></image>
						<view>
							<!-- 商品名称 -->
							<view>{{ item.title }}</view>
							<!-- 价格 -->
							<view>¥{{ item.price }}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- loadmore 加载更多-->
		<uni-load-more :status="status"></uni-load-more>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showGoTop" @click="doGoTop">
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	// vdata
	data() {
		return {
			// null 空值 不确定之后的类型
			result: null,
			// 加载组件状态 more loading noMore
			status: 'more',
			// 接口地址 为了各方法共享调用 做成公共属性
			url: 'http://www.codeboy.com:9999/data/product/list.php',
			showGoTop: false
		};
	},
	onPageScroll(e) {
		// console.log(e);
		this.showGoTop = e.scrollTop > 1500;
	},
	// 组件周期  挂载时触发
	mounted() {
		// 1、发请求
		this.getData(1);
	},
	// 下拉事件  刷新数据
	// onpu
	// 页面的下拉事件需要在pages.json中开启
	// "enablePullDownRefresh": true
	onPullDownRefresh() {
		// 加载最新数据  加载第一页
		this.getData(1, true);
	},

	// 触底事件  触底时触发
	onReachBottom() {
		this.status = 'loading';
		const { pno, pageCount } = this.result;
		if (pno == pageCount) {
			// noMore是固定值
			this.status = 'noMore';
			// 并且不在发送请求  后续代码不执行
			return;
		}
		this.getData(pno + 1);
	},
	methods: {
		// 回到顶部
		doGoTop() {
			console.log('触发回到顶部');
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		// 发请求请求 拿回数据
		// isPull=false 调用时不传isPull参数即为false
		getData(pno, isPull = false) {
			uni.request({
				// 语法糖写法  url
				url: this.url,
				method: 'GET',
				data: { pno: pno },
				success: res => {
					//2、拿数据
					// clog 快捷
					console.log(res);
					//3、存本地  根据实际返回数据格式进行获取
					// 如果非第一页就需要拼接数据
					if (pno > 1) {
						res.data.data = [...this.result.data, ...res.data.data];
					}
					this.result = res.data;
					// 如果是下拉触发的此方法 需要关闭下拉事件状态
					if (isPull) {
						uni.stopPullDownRefresh();
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>
<!-- scoped 代表当前组件生效 -->
<!-- lang scss 需要HBuilderX 安装sass插件 -->
<style scoped lang="scss">
.cell {
	// 内填充
	padding: 5px;
	display: flex;
	> image {
		width: 180rpx;
		height: 180rpx;
		// 方法一
		// flex:none;
		// 方法二
		min-width: 180rpx;
		// 方法三
		// flex-shrink: 0;
	}
	> view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// 商品名称
		> view:first-of-type {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		> view:last-of-type {
			color: red;
			font-size: 1.1em;
		}
	}
}
</style>
